<template>
	<div id="cesiumContainer" class="page-fs" />
</template>
<script setup>
	import {
		onMounted
	} from "vue";
	import ToolCesium from "./tool-cesium.js"

	onMounted(() => {
		var viewer = ToolCesium.init();
		
		ToolCesium.setCameraPos();
		
		setTimeout(() => ToolCesium.flyTo().then(() => addEntities()), 5000);

		var redBox = viewer.entities.add({
			name: 'Red box with black outline',
			position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
			box: {
				dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
				material: Cesium.Color.RED.withAlpha(0.5),
				outline: true,
				outlineColor: Cesium.Color.BLACK
			}
		});
		
		var wyoming = viewer.entities.add({  //添加一个实体，仅需要传递一个简单JSON对象，返回值是一个Entity对象
		  name : 'Wyoming',
		  polygon : {
		    hierarchy : Cesium.Cartesian3.fromDegreesArray([//一组地理坐标
		                              -109.080842,45.002073,
		                              -105.91517,45.002073,
		                              -104.058488,44.996596,
		                              -104.053011,43.002989,
		                              -104.053011,41.003906,
		                              -105.728954,40.998429,
		                              -107.919731,41.003906,
		                              -109.04798,40.998429,
		                              -111.047063,40.998429,
		                              -111.047063,42.000709,
		                              -111.047063,44.476286,
		                              -111.05254,45.002073]),
		    material : Cesium.Color.RED.withAlpha(0.5), //材质
		    outline : true, //是否显示轮廓
		    outlineColor : Cesium.Color.BLACK //轮廓的颜色
		  }
		});
		// viewer.zoomTo(wyoming);//缩放、平移视图使实体可见 
		
		var blueBox = viewer.entities.add({
		    name : 'Blue box',
		     //中心的位置
		    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
		    box : {
		        //长宽高
		        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
		        material : Cesium.Color.BLUE
		    }
		});
		 
		var redBox = viewer.entities.add({
		    name : 'Red box with black outline',
		    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
		    box : {
		        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
		        material : Cesium.Color.RED,
		        outline : true, //显示轮廓
		        outlineColor : Cesium.Color.BLACK
		    }
		});
		 
		var outlineOnly = viewer.entities.add({
		    name : 'Yellow box outline',
		    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
		    box : {
		        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
		        fill : false,  //不显示填充
		        outline : true,
		        outlineColor : Cesium.Color.YELLOW
		    }
		});
		
		//浮空的绿色圆形
		var greenCircle = viewer.entities.add({
		    position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),
		    name : 'Green circle at height',
		    ellipse : {
		        semiMinorAxis : 300000.0,
		        semiMajorAxis : 300000.0,
		        height: 200000.0, //浮空
		        material : Cesium.Color.GREEN
		    }
		});
		//红色椭圆形，位于地表，带轮廓
		var redEllipse = viewer.entities.add({
		    //不带高度
		    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
		    name : 'Red ellipse on surface with outline',
		    ellipse : {
		        semiMinorAxis : 250000.0,
		        semiMajorAxis : 400000.0,
		        material : Cesium.Color.RED.withAlpha(0.5),
		        outline : true,
		        outlineColor : Cesium.Color.RED
		    }
		});
		//蓝色椭圆柱，旋转了角度
		var blueEllipse = viewer.entities.add({
		    position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
		    name : 'Blue translucent, rotated, and extruded ellipse',
		    ellipse : {
		        semiMinorAxis : 150000.0,
		        semiMajorAxis : 300000.0,
		        extrudedHeight : 200000.0,  //拉伸
		        rotation : Cesium.Math.toRadians(45), //旋转
		        material : Cesium.Color.BLUE.withAlpha(0.7),
		        outline : true
		    }
		});
		 
		// viewer.zoomTo(viewer.entities);
		
		/**
		 * 根据偏移量计算目标点经纬度
		 * @param {} start  起始点经纬度数组，单位度
		 * @param {} offset 东北方向的偏移量，单位米
		 * @param {} 目标点经纬度数组，单位度
		 */
		function offsetToLongLat(start, offset) {
			var er = 6378137;
			var lat = parseFloat(start[1]);
			var lon = parseFloat(start[0]);
			var dn = parseFloat(offset[1]);
			var de = parseFloat(offset[0]);

			dLat = dn / er;
			var pi = Math.PI;
			var dLon = de / (er * Math.cos(pi * lat / 180))
			return [
				lon + dLon * 180 / pi, lat + dLat * 180 / pi
			];
		}
		/**
		 * 通过绘制三角形模拟卫星光束效果
		 * @param {} entities 实体集
		 * @param {} stltPos 卫星三维坐标数组
		 * @param {} points 地面点
		 * @param {} color CSS颜色代码，例如#FF0000
		 */
		function lightShinePolygon(entities, stltPos, points, color) {
			for (var i = 0; i < points.length; i += 2) {
				var array = [
					stltPos[0], stltPos[1], stltPos[2], points[i], points[i + 1], 0
				];
				if (i + 2 == points.length) {
					array.push(points[0]);
					array.push(points[1]);
				} else {
					array.push(points[i + 2]);
					array.push(points[i + 3]);
				}
				array.push(0);
				viewer.entities.add({
					polygon: {
						hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(array),
						perPositionHeight: true,
						outline: false,
						material: Cesium.Color.fromAlpha(Cesium.Color.fromCssColorString(color), .1)
					}
				});
			}
		}
		/**
		 * 添加实体
		 */
		function addEntities() {
			//卫星一
			var stltPos = [
				110.0, 40.0, 2500000
			];
			viewer.entities.add({
				position: Cesium.Cartesian3.fromDegrees.apply(this, stltPos),
				billboard: {
					image: '/assets/logo.png',
					horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
					verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向位置计算基准设为底部，默认中心
					width: 92,
					height: 36
				}
			});
			//一个多边形覆盖范围
			{
				var color = '#FF0000';
				//模拟光照效果的若干多边形
				var points = [
					100, 48, 110, 40, 115, 40, 120, 43, 120, 55
				];
				lightShinePolygon(viewer.entities, stltPos, points, color);
				//地面多边形
				viewer.entities.add({
					polygon: {
						hierarchy: Cesium.Cartesian3.fromDegreesArray(points),
						outline: true,
						outlineColor: Cesium.Color.fromAlpha(Cesium.Color.fromCssColorString(color), .4),
						material: Cesium.Color.fromAlpha(Cesium.Color.fromCssColorString(color), .3)
					}
				});
			}

			// //一个圆形覆盖范围
			try {
				var r = 600000; //半径
				var color = '#0000FF';
				//圆心
				var ecLong = 110.0;
				var ecLat = 30.0;
				var ec = Cesium.Cartesian3.fromDegrees(ecLong, ecLat, 0);
				//模拟光照效果的若干多边形
				var points = [];
				for (var i = 0; i < 360; i += 30) {
					var coord = offsetToLongLat([
						ecLong, ecLat
					], [
						Math.cos(Math.PI * i / 180) * r, Math.sin(Math.PI * i / 180) * r
					]);
					points.push(coord[0]);
					points.push(coord[1]);
				}
				lightShinePolygon(viewer.entities, stltPos, points, color);
				//圆
				viewer.entities.add({
					position: ec,
					ellipse: {
						semiMinorAxis: r,
						semiMajorAxis: r,
						height: 0.0,
						outline: true,
						outlineColor: Cesium.Color.fromAlpha(Cesium.Color.fromCssColorString(color), .4),
						material: Cesium.Color.fromAlpha(Cesium.Color.fromCssColorString(color), .3)
					}
				});
			} catch (e) {
				console.log(e);
			}
		}
	})
</script>
<style scoped lang="scss">
	.cesium-widget-credits {
		display: none;
	}

	#cesiumContainer {
		height: 800px;
	}
</style>
